<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <!--当前示例页面样式表引用-->
        <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
        <script include="jquery" src="./static/libs/include-lib-local.js"></script>
        <script src="./static/libs/include-openlayers-local.js"></script>

        <style type="text/css">
            #mapCon {
                width: 100%;
                height: 95%;
                position: absolute;
            }
            .checkbox {
                left: 5px;
                position: absolute;
                z-index: 1000;
                bottom: 5px;
            }

            /**
        * 提示框的样式信息
        */
            .tooltip {
                position: relative;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 4px;
                color: white;
                padding: 4px 8px;
                opacity: 0.7;
                white-space: nowrap;
            }

            .tooltip-measure {
                opacity: 1;
                font-weight: bold;
            }

            .tooltip-static {
                background-color: #ffcc33;
                color: black;
                border: 1px solid white;
            }

            .tooltip-measure:before,
            .tooltip-static:before {
                border-top: 6px solid rgba(0, 0, 0, 0.5);
                border-right: 6px solid transparent;
                border-left: 6px solid transparent;
                content: '';
                position: absolute;
                bottom: -6px;
                margin-left: -7px;
                left: 50%;
            }

            .tooltip-static:before {
                border-top-color: #ffcc33;
            }
        </style>

        <script type="text/javascript">
            var vectorSource = null
            var map = null
            var mapDocLayer = null
            var draw = null //绘制工具
            var { protocol, ip, port } = window.webclient
            function init() {
                //初始化地图容器
                map = new ol.Map({
                    target: 'mapCon', //地图容器div的ID
                    controls: ol.control.defaults({
                        attributionOptions: {
                            collapsible: true,
                        },
                    }),
                    view: new ol.View({
                        center: [(108.34341 + 116.150939561213) / 2, (29.0125822276524 + 33.2932017737021) / 2],
                        zoom: 7,
                        projection: 'EPSG:4326',
                    }),
                })

                //初始化地图文档图层对象
                mapDocLayer = new Zondy.Map.MapDocTileLayer('MapGIS IGS MapDocLayer', 'Hubei4326', {
                    ip: `${ip}`,
                    port: `${port}`,
                })
                //将地图文档图层加载到地图中
                map.addLayer(mapDocLayer)

                //加载测量的绘制矢量层
                vectorSource = new ol.source.Vector() //图层数据源
                var vectorLayer = new ol.layer.Vector({
                    source: vectorSource,
                    style: new ol.style.Style({
                        //图层样式
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.2)', //填充颜色
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#ffcc33', //边框颜色
                            width: 2, // 边框宽度
                        }),
                        image: new ol.style.Circle({
                            radius: 7,
                            fill: new ol.style.Fill({
                                color: '#ffcc33',
                            }),
                        }),
                    }),
                })
                map.addLayer(vectorLayer)
            }

            //长度测量
            function lengthMeasure() {
                if (draw !== null) {
                    map.removeInteraction(draw) //移除绘制图形
                }
                createMeasureTooltip() //创建测量工具提示框
                createHelpTooltip() //创建帮助提示框
                addInteraction('length') //添加绘图进行测量
            }
            //面积测量
            function areaMeasure() {
                if (draw !== null) {
                    map.removeInteraction(draw) //移除绘制图形
                }
                createMeasureTooltip() //创建测量工具提示框
                createHelpTooltip() //创建帮助提示框
                addInteraction('area')
            }
            //清空测量结果
            function clearAll() {
                if (vectorSource != null) {
                    vectorSource.clear()
                }
                if (draw !== null) {
                    map.removeInteraction(draw) //移除绘制图形
                }
                removeTooltip()
            }
        </script>
    </head>

    <body onload="init()">
        <div id="mapCon"></div>
        <div id="menuContain" class="menuContain">
            <div id="tool-container">
                <div id="dataSourceMenuID" class="optmain" status="unactive" onclick="switchMenuStatus(this,'menu1')"><span></span><i class="menuGroup">几何测量</i><em></em></div>
            </div>
        </div>
        <div id="menu1" class="menuStrip" style="display:none">
            <ul class="menuItems">
                <li onclick="lengthMeasure()"><span class="item1"></span><i>长度</i></li>
                <li onclick="areaMeasure()"><span class="item1"></span><i>面积</i></li>
                <li class="divider"></li>
                <li onclick="clearAll()"><span class="item3"></span><i>移除</i></li>
            </ul>
        </div>
        <script>
            function switchMenuStatus(div, menuitemFrameID) {
                var temDivs = document.getElementsByClassName('optmain')
                if (temDivs.length > 0) {
                    for (var i = 0; i < temDivs.length; i++) {
                        if (temDivs[i] === div) {
                            var status = div.getAttribute('status')
                            if (status == 'unactive') {
                                div.setAttribute('status', 'active')
                                var tem_spans = div.getElementsByTagName('span')
                                var tem_ems = div.getElementsByTagName('em')
                                tem_spans[0].className = 'active'
                                tem_ems[0].className = 'active'

                                //显示菜单项
                                DisplayMenuItem(true, menuitemFrameID)
                            } else {
                                div.setAttribute('status', 'unactive')
                                var tem_spans = div.getElementsByTagName('span')
                                var tem_ems = div.getElementsByTagName('em')
                                tem_spans[0].className = ''
                                tem_ems[0].className = ''

                                //隐藏菜单项
                                DisplayMenuItem(false, menuitemFrameID)
                            }
                        } else {
                            var status = temDivs[i].getAttribute('status')
                            if (status == 'active') {
                                temDivs[i].setAttribute('status', 'unactive')
                                var tem_spans = temDivs[i].getElementsByTagName('span')
                                var tem_ems = temDivs[i].getElementsByTagName('em')
                                tem_spans[0].className = ''
                                tem_ems[0].className = ''
                            }
                        }
                    }
                }
            }

            function DisplayMenuItem(isDisplay, iframeID) {
                var menuItemFrame = document.getElementById(iframeID)
                if (menuItemFrame != null) {
                    if (isDisplay) {
                        var temDivs = document.getElementsByClassName('menuStrip')
                        if (temDivs.length > 0) {
                            for (var i = 0; i < temDivs.length; i++) {
                                if (temDivs[i] != menuItemFrame) {
                                    temDivs[i].style.display = 'none'
                                }
                            }
                        }
                        menuItemFrame.style.display = ''
                    } else {
                        menuItemFrame.style.display = 'none'
                    }
                }
            }

            /**
             * 当前绘制的要素（Currently drawn feature.）
             * @type {ol.Feature}
             */
            var sketch
            /**
             * 帮助提示框对象（The help tooltip element.）
             * @type {Element}
             */
            var helpTooltipElement
            /**
             *帮助提示框显示的信息（Overlay to show the help messages.）
             * @type {ol.Overlay}
             */
            var helpTooltip
            /**
             * 测量工具提示框对象（The measure tooltip element. ）
             * @type {Element}
             */
            var measureTooltipElement
            /**
             *测量工具中显示的测量值（Overlay to show the measurement.）
             * @type {ol.Overlay}
             */
            var measureTooltip
            /**
             *  当用户正在绘制多边形时的提示信息文本
             * @type {string}
             */
            var continuePolygonMsg = 'Click to continue drawing the polygon'
            /**
             * 当用户正在绘制线时的提示信息文本
             * @type {string}
             */
            var continueLineMsg = 'Click to continue drawing the line'

            /**
             * 鼠标移动事件处理函数
             * @param {ol.MapBrowserEvent} evt
             */
            function pointerMoveHandler(evt) {
                if (evt.dragging) {
                    return
                }
                /** @type {string} */
                var helpMsg = 'Click to start drawing' //当前默认提示信息
                //判断绘制几何类型设置相应的帮助提示信息
                if (sketch) {
                    var geom = sketch.getGeometry()
                    if (geom instanceof ol.geom.Polygon) {
                        helpMsg = continuePolygonMsg //绘制多边形时提示相应内容
                    } else if (geom instanceof ol.geom.LineString) {
                        helpMsg = continueLineMsg //绘制线时提示相应内容
                    }
                }
                if (helpTooltipElement) {
                    helpTooltipElement.innerHTML = helpMsg //将提示信息设置到对话框中显示
                    helpTooltip.setPosition(evt.coordinate) //设置帮助提示框的位置
                    $(helpTooltipElement).removeClass('hidden') //移除帮助提示框的隐藏样式进行显示
                }
            }
            /**
             * 加载交互绘制控件函数 pType:area/length
             */
            function addInteraction(ptype) {
                var type = ptype == 'area' ? 'Polygon' : 'LineString'
                draw = new ol.interaction.Draw({
                    source: vectorSource, //测量绘制层数据源
                    type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型
                    style: new ol.style.Style({
                        //绘制几何图形的样式
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.2)',
                        }),
                        stroke: new ol.style.Stroke({
                            color: 'rgba(0, 0, 0, 0.5)',
                            lineDash: [10, 10],
                            width: 2,
                        }),
                        image: new ol.style.Circle({
                            radius: 5,
                            stroke: new ol.style.Stroke({
                                color: 'rgba(0, 0, 0, 0.7)',
                            }),
                            fill: new ol.style.Fill({
                                color: 'rgba(255, 255, 255, 0.2)',
                            }),
                        }),
                    }),
                })
                map.addInteraction(draw)

                map.on('pointermove', pointerMoveHandler) //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
                //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
                $(map.getViewport()).on('mouseout', function() {
                    $(helpTooltipElement).addClass('hidden')
                })

                var listener
                //绑定交互绘制工具开始绘制的事件
                draw.on(
                    'drawstart',
                    function(evt) {
                        // set sketch
                        sketch = evt.feature //绘制的要素

                        /** @type {ol.Coordinate|undefined} */
                        var tooltipCoord = evt.coordinate // 绘制的坐标
                        //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
                        listener = sketch.getGeometry().on('change', function(evt) {
                            var geom = evt.target //绘制几何要素

                            var flatCoordinates = geom.flatCoordinates
                            var dots = []
                            var length = flatCoordinates.length
                            for (var i = 0; i < length; i += 2) {
                                dots.push(new Zondy.Object.Point2D(flatCoordinates[i], flatCoordinates[i + 1]))
                            }
                            var output
                            if (geom instanceof ol.geom.Polygon) {
                                CalArea(dots)
                                tooltipCoord = geom.getInteriorPoint().getCoordinates() //坐标
                            } else if (geom instanceof ol.geom.LineString) {
                                CalPolyLineLength(dots)
                                tooltipCoord = geom.getLastCoordinate() //坐标
                            }
                            measureTooltip.setPosition(tooltipCoord) //设置测量工具提示框的显示位置
                        })
                    },
                    this
                )
                //绑定交互绘制工具结束绘制的事件
                draw.on(
                    'drawend',
                    function(evt) {
                        measureTooltipElement.className = 'tooltip tooltip-static' //设置测量提示框的样式
                        measureTooltip.setOffset([0, -7])
                        // unset sketch
                        sketch = null //置空当前绘制的要素对象
                        // unset tooltip so that a new one can be created
                        measureTooltipElement = null //置空测量工具提示框对象
                        createMeasureTooltip() //重新创建一个测试工具提示框显示结果
                        ol.Observable.unByKey(listener)
                    },
                    this
                )
            }

            var overLayerList = []
            /**
             *创建一个新的帮助提示框（tooltip）
             */
            function createHelpTooltip() {
                if (helpTooltipElement) {
                    helpTooltipElement.parentNode.removeChild(helpTooltipElement)
                }
                helpTooltipElement = document.createElement('div')
                helpTooltipElement.className = 'tooltip hidden'
                helpTooltip = new ol.Overlay({
                    element: helpTooltipElement,
                    offset: [15, 0],
                    positioning: 'center-left',
                })
                map.addOverlay(helpTooltip)
                overLayerList.push(helpTooltip)
            }

            /**
             *创建一个新的测量工具提示框（tooltip）
             */
            function createMeasureTooltip() {
                if (measureTooltipElement) {
                    measureTooltipElement.parentNode.removeChild(measureTooltipElement)
                }
                measureTooltipElement = document.createElement('div')
                measureTooltipElement.className = 'tooltip tooltip-measure'
                measureTooltip = new ol.Overlay({
                    element: measureTooltipElement,
                    offset: [0, -15],
                    positioning: 'bottom-center',
                })
                map.addOverlay(measureTooltip)
                overLayerList.push(measureTooltip)
            }

            /**
             *清空测量工具所有的提示信息
             */
            function removeTooltip() {
                if (overLayerList != null && overLayerList.length > 0) {
                    var len = overLayerList.length
                    for (var i = len - 1; i >= 0; i--) {
                        map.removeOverlay(overLayerList[i])
                    }
                }
            }

            /** 计算折线长度*/
            function CalPolyLineLength(dots) {
                //初始化长度测量服务
                var calLength = new Zondy.Service.CalPolyLineLength(dots, {
                    //IP地址
                    ip: `${ip}`,
                    //端口号
                    port: `${port}`,
                })
                //建议普通用户采用此类直接获取MapGIS GDB已经提供的空间参考系
                var gdbInfo = new Zondy.Object.CGDBInfo({
                    //数据库名称
                    GDBName: 'OpenLayerVecterMap',
                    //数据源名称
                    ServerName: 'MapGISLocal',
                    //除MapGISLocal数据源，其它的都设置
                    Password: '',
                    //除MapGISLocal数据源，其它的都设置
                    User: '',
                })
                //用于进行SRSID投影的参数类
                var projBySRSID = new Zondy.Service.CProjectBySRSID(601, gdbInfo)
                //执行长度测量服务，measureCallBack为测量回调函数
                calLength.execute(projBySRSID, LengthmeasureCallBack)
            }

            /** 测量回调函数
             *  @param {json对象} data 获取结果对象
             */
            function LengthmeasureCallBack(data) {
                if (data && data.succeed) {
                    var length = data.value
                    var output
                    if (length > 100) {
                        output = Math.round((length / 1000) * 100) / 100 + '' + 'km'
                    } else {
                        output = Math.round(length * 100) / 100 + '' + 'm'
                    }
                    measureTooltipElement.innerHTML = output
                    measureTooltip.setPosition(tooltipCoord)
                    measureTooltipElement.className = 'tooltip tooltip-static'
                    measureTooltipElement.id = 'tooltip-static'
                    // measureTooltip.setOffset([0, -7]);
                    sketch = null
                    measureTooltipElement = null
                    createMeasureTooltip()
                    ol.Observable.unByKey(listener)
                }
            }

            /** 计算面积*/
            function CalArea(dots) {
                //初始化长度测量服务
                var calArea = new Zondy.Service.CalArea(dots, {
                    //IP地址
                    ip: `${ip}`,
                    //端口号
                    port: `${port}`,
                })
                //建议普通用户采用此类直接获取MapGIS GDB已经提供的空间参考系
                var gdbInfo = new Zondy.Object.CGDBInfo({
                    //数据库名称
                    GDBName: 'OpenLayerVecterMap',
                    //数据源名称
                    ServerName: 'MapGISLocal',
                    //除MapGISLocal数据源，其它的都设置
                    Password: '',
                    //除MapGISLocal数据源，其它的都设置
                    User: '',
                })
                //用于进行SRSID投影的参数类
                var projBySRSID = new Zondy.Service.CProjectBySRSID(601, gdbInfo)
                //执行长度测量服务，measureCallBack为测量回调函数
                calArea.execute(projBySRSID, areaMeasureCallBack)
            }

            /** 测量回调函数
             *  @param {json对象} data 获取结果对象
             */
            function areaMeasureCallBack(data) {
                if (data && data.succeed) {
                    var area = data.value
                    var output
                    if (area > 10000) {
                        output = Math.round((area / 1000000) * 100) / 100 + '' + 'km<sup>2</sup>'
                    } else {
                        output = Math.round(area * 100) / 100 + '' + 'm<sup>2</sup>'
                    }
                    measureTooltipElement.innerHTML = output
                    measureTooltip.setPosition(tooltipCoord)
                    measureTooltipElement.className = 'tooltip tooltip-static'
                    measureTooltipElement.id = 'tooltip-static'
                    // measureTooltip.setOffset([0, -7]);
                    sketch = null
                    measureTooltipElement = null
                    createMeasureTooltip()
                    ol.Observable.unByKey(listener)
                }
            }
        </script>
    </body>
</html>
